<template>
  <div class="table-form">
    <el-form ref="formRef" :inline="true" class="pro-select-box">
      <el-form-item :label="t('common.time')" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          range-separator="To"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item :label="t('common.logKeyWord')" prop="keyWord">
        <el-input
          v-model="form.keyWord"
          clearable
          :placeholder="t('common.logKeyWord')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">{{
          t("common.queryText")
        }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
    >
      <template #connectionStatus="{ row }">
        {{ getConnectionStatus(row.connectionStatus) }}
      </template>
      <template #protocol="{ row }">
        {{ getProtocol(row.protocol) }}
      </template>
      <template #operationType="{ row }">
        {{ getOperationType(row.operationType) }}
      </template>
    </hcTable>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import dayjs from "dayjs";
import useQueryTable from "@/hooks/useQueryTable";
import { useI18n } from "vue-i18n";

let { t } = useI18n();

let props = defineProps({
  url: {
    type: String,
    default: "",
  },
  tableColumn: {
    type: Array,
    default: [],
  },
});

let form = reactive({
  time: [dayjs().subtract(7, "day").startOf("day"), dayjs().endOf("day")],
  keyWord: "",
});

let { list, query, options, handlerPageSize, handlerPageIndex } = useQueryTable(
  { get: props.url },
  form,
  { time: true }
);

let cstatus = [
  t("loginfo.base.notConnected"),
  t("loginfo.base.connected"),
  t("loginfo.base.connectionInterrupted"),
  t("loginfo.base.connectionFailed"),
];
function getConnectionStatus(s) {
  return cstatus[s];
}

let protocol = [
  "WebServic",
  "Modbu",
  "usB",
  "TCP_IP",
  "HTTP",
  "UDP",
  "OpcUa",
  "s7",
  "Sim",
];
function getProtocol(p) {
  return protocol[p];
}

let opera = [
  t("loginfo.base.add"),
  t("loginfo.base.update"),
  t("loginfo.base.delete"),
  t("loginfo.base.search"),
  t("loginfo.base.login"),
  t("loginfo.base.logout"),
];
function getOperationType(o) {
  return opera[o];
}
</script>
<style lang="scss" scoped></style>
